<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left_menu {
            width: 250px;
            background-color: aqua;

        }

        .fr {
            float: right;
        }
        .submenu{
            display: none;
        }
        .left_menu  li:hover .submenu{
          display: block;
        }
    </style>
</head>

<body>
    <div class="left_menu">
        <ul>
            <li>
                <a href="#">
                    <span class="fr">&gt;</span> 手机
                </a>
                <ol class="submenu">
                    <li>
                        <img src="" alt="">
                        <span></span>
                    </li>
                </ol>
            </li>
        </ul>
    </div>
    <script src="js/xiaomi.js"></script>
    <script>
        //1.菜单
        var html = '';
        for (var i = 0; i < menuarr.length; i++) {
            html += `
          <li>
                <a href="#">
                    <span class="fr">&gt;</span> ${menuarr[i]}
                </a>
                <ol class="submenu">
                `;
            console.log(data[i].list);
            // 二级菜单
            var str='';
           for(var j=0;j<data[i].list.length;j++){
             console.log(data[i].list[j]);
               str+=`<li>
                        <img src="${data[i].list[j].url}" alt="">
                        <span>${data[i].list[j].title}</span>
                    </li>`

           }
             // 二级菜单 拼接完成
           html+=str;

            // 
            //     <li></li>

            html += ` </ol></li>`;

            document.querySelector('.left_menu>ul').innerHTML = html;
        }
    </script>
</body>

</html>